import React from 'react';
import { Form, Input, Button, Select, notification } from 'antd'
import { useNavigate } from 'react-router-dom'
import MyCarousel from '../components/MyCarousel';
import '../styles/login.scss'
// 声明类型
interface Props {

}
function Login(props:Props) {
    //表单验证通过,执行
    var navigate = useNavigate()
    const onFinish = (values: any) => {
        //发起 登录请求
        notification.success({ message: '登陆成功!' });
        navigate('/index');//跳转首页
    };
   
    return (
        <div className='login'>
            <div className='lbt'>
                <div className='left'>
                    {/* 轮播图组件 */}
                    <MyCarousel></MyCarousel>
                </div>
                <div className="form-box">
                    <Form
                        labelCol={{ span: 8 }}
                        wrapperCol={{ span: 18 }}
                        onFinish={onFinish}
                    >
                        <h1>登录页</h1>
                 

                        <Form.Item
                            label="手机号"
                            name="phone"
                            rules={[{ required: true, message: '输入手机号' }]}
                        >
                            <Input placeholder='输入手机号' />
                        </Form.Item>

                        <Form.Item
                            label="密码"
                            name="password"
                            rules={[{ required: true, message: '输入密码' }]}
                        >
                            <Input.Password />
                        </Form.Item>
                      


                        <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
                            <Button type="primary" htmlType="submit" >登录</Button>
                        </Form.Item>

                    </Form>
                </div>
            </div>
        </div>
    );
}

export default Login;